<!-- 调拨单记录 -->
<template>
    <div id="change">
        <div class="change-top">
            供应商&nbsp;
            <el-input style="width: 150px;" v-model="updateInBound.providerName" size="small"></el-input>
            <el-button @click="dialogShow = true" size="small"><i class="el-icon-more"></i></el-button>
            <!-- 单据日期&nbsp;
        <el-date-picker size="small" style="width: 150px;" v-model="listDate" type="date" placeholder="选择日期">
        </el-date-picker> -->
            &nbsp;&nbsp;业务员&nbsp;
            <el-select v-model="updateInBound.employeeId" size="small" style="width: 150px;">
                <el-option label="职员1" :value="1">
                </el-option>
                <el-option label="职员2" :value="2">
                </el-option>
            </el-select>
            业务类别&nbsp;
            <el-select v-model="updateInBound.bKind" size="small" style="width: 150px;">
                <el-option label="业务1" :value="1">
                </el-option>
                <el-option label="业务2" :value="2">
                </el-option>
            </el-select>
            <span>
                <el-button size="small" style="margin-left: 10px;" type="primary">查询</el-button>
                <el-button size="small" @click="saveUpdate">保存</el-button>
                <el-button size="small" type="primary">导入</el-button>
                <el-button size="small" type="primary">导出</el-button>
                <el-button size="small" type="success">审核</el-button>
                <el-button size="small" type="danger">删除</el-button>
            </span>
            <br>
            <PublicLink style="position: relative;left: 1000px;top: -20px;" />
        </div>
        <div class=" change-content">
            <el-table @row-click="handlerClick" :row-style="{ height: '55px' }" show-summary
                :summary-method="getSummaries" height="450px" :data="updateDetailList" border
                style="width: 100%;font-size: 13px;">
                <el-table-column style="width: 120px;padding-left: 10px;">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="addRow"><i class="el-icon-circle-plus-outline"></i></el-button>
                        <el-button size="mini" @click="reduceRow(scope.$index)"><i
                                class="el-icon-remove-outline"></i></el-button>
                    </template>

                </el-table-column>
                <el-table-column prop="goodcode" label="商品编号" width="260">
                    <template slot-scope="scope">
                        <el-input style="width: 180px" size="small" v-model="scope.row.goodcode"></el-input>
                        <el-button @click="goodsShow = true" size="small"><i class="el-icon-more"></i></el-button>
                        <!-- <span v-else>{{ scope.row.goodcode }}</span> -->
                    </template>
                </el-table-column>
                <el-table-column prop="goodname" label="商品名称" width="150">
                    <template slot-scope="scope">
                        <el-input size="small" v-model="scope.row.goodname"></el-input>
                        <!-- <span v-else>{{ scope.row.goodname }}</span> -->
                    </template>
                </el-table-column>
                <el-table-column prop="categoryName" label="商品类别" width="120">
                </el-table-column>
                <el-table-column prop="brandName" label="品牌" width="120">
                </el-table-column>
                <el-table-column prop="unitname" label="单位" width="120">
                </el-table-column>
                <el-table-column prop="num" label="数量" width="120">
                    <template slot-scope="scope">
                        <el-input size="small" v-model="scope.row.num"></el-input>
                        <!-- <span v-else>{{ scope.row.num }}</span> -->
                    </template>
                </el-table-column>
                <el-table-column prop="wholeBag" label="整件散包" width="120">
                </el-table-column>
                <el-table-column prop="unitPrice" label="入库单价" width="150">
                    <template slot-scope="scope">
                        <el-input size="small" v-model="scope.row.unitPrice"></el-input>
                        <!-- <span v-else>{{ scope.row.unitPrice }}</span> -->
                    </template>
                </el-table-column>
                <el-table-column label="仓库" width="150">
                    <template slot-scope="scope">
                        <el-select size="small" v-if="scope.row.isEdit" v-model="scope.row.wId">
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column prop="detailRemark" label="备注" width="160">
                    <template slot-scope="scope">
                        <el-input size="small" v-model="scope.row.detailRemark"></el-input>
                        <!-- <span v-else>{{ scope.row.detailRemark }}</span> -->
                    </template>
                </el-table-column>
            </el-table>
            <el-button style="position: relative;right: -1200px;" @click="goto('inBoundList')">历史单据</el-button>
        </div>
        <el-dialog top="20px" title="选择供应商" :visible.sync="dialogShow">
            <ProviderChoose ref="choosePro" :dialogShow="dialogShow" />
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogShow = false">取 消</el-button>
                <el-button type="primary" @click="yes">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog top="20px" title="选择商品" :visible.sync="goodsShow">
            <GoodsChoose ref="chooseGoods" :goodsShow="goodsShow" />
            <div slot="footer" class="dialog-footer">
                <el-button @click="goodsShow = false">取 消</el-button>
                <el-button type="primary" @click="yesGoods">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import PublicLink from '../public_com/PublicLink.vue';
import ProviderChoose from '../public_com/ProviderChoose.vue';
import GoodsChoose from '../public_com/GoodsChoose.vue';
export default {
    name: 'UpdateBound',
    components: {
        PublicLink,
        ProviderChoose,
        GoodsChoose
    },
    data() {
        return {
            goodsShow: false,
            dialogShow: false,
            //分页参数
            listDate: '',
            switchValue: '1',
            inBound: {
                inBoundId: '',
                bKind: '',
                employeeId: '',
                truckingNumber: '200126897',
                state: '',
                createDate: '',
                providerId: '',
            },
            options: [{
                value: '选项1',
                label: '黄金糕'
            }, {
                value: '选项2',
                label: '双皮奶'
            }, {
                value: '选项3',
                label: '蚵仔煎'
            }, {
                value: '选项4',
                label: '龙须面'
            }, {
                value: '选项5',
                label: '北京烤鸭'
            }],
            value: '',
            input: '',
            value1: '',
            proName: '',
            updateInBound: {},
            updateDetailList: []
        }
    },
    methods: {
        addRow() {
            this.updateDetailList.push({
                goodcode: '',
                brandName: '',
                origin: '',
                goodname: '',
                categoryName: '',
                unitname: '',
                wId: '',
                ibDetailId: '',
                inBoundId: '',
                unitPrice: '',
                num: '',
                wholeBag: '',
                // isEdit: false
            })
        },
        reduceRow(index) {
            console.log(index)
            if (this.updateDetailList.length > 1) {
                this.updateDetailList.splice(index, 1)
            }
        },
        goto(to) {
            this.$router.push(to)
        },
        // handlerClick(row, column, event) {
        //     this.inBoundList.forEach((store, index) => {
        //         store.isEdit = false
        //     })
        //     row.isEdit = true
        // },

        getSummaries(param) {
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = '合计';
                    return;
                }
                const values = data.map(item => Number(item[column.property]));
                if (column.property === "num") {
                    sums[index] = values.reduce((prev, curr) => {
                        const value = Number(curr);
                        if (!isNaN(value)) {
                            return prev + curr;
                        } else {
                            return prev;
                        }
                    }, 0);
                }
            });

            return sums;
        },
        yes() {
            this.dialogShow = false
            var list = this.$refs.choosePro.selectionList
            this.proName = list[0].providerName
            this.inBound.providerId = list[0].providerId
        },
        yesGoods() {
            this.goodsShow = false
            // this.goodsList = 
            // console.log(this.goodsList)
            //遍历商品列表
            var detailList = this.$refs.chooseGoods.selectionList
            var indexs = []
            //删除表格中空白的行
            this.updateDetailList.forEach((detail, index) => {
                if (detail.goodcode == '') {
                    indexs.push(index)
                    console.log(index)
                }
            })
            indexs.reverse().forEach((index, i) => {
                console.log(index)
                this.updateDetailList.splice(index, 1)
            })
            console.log(this.updateDetailList)
            detailList.forEach((detail, index) => {
                this.updateDetailList.push(detail)
            })
        },
        successMessage(msg) {
            this.$message({
                message: msg,
                type: 'success'
            });
        },
        errorMessage(msg) {
            this.$message({
                message: msg
                ,
                type: 'error'
            })
        },
        saveUpdate() {
            var details = []
            this.updateDetailList.forEach((ib, index) => {
                details.push({
                    goodcode: ib.goodcode,
                    unitPrice: ib.unitPrice,
                    goodname: ib.goodname,
                    num: ib.num,
                    wholeBag: ib.wholeBag,
                    detailRemark: ib.detailRemark,
                    wId: ib.wId
                })
            })
            const formdata = new FormData()
            formdata.append('inBound', JSON.stringify(this.inBound))
            formdata.append("inBoundList", JSON.stringify(details))
            this.axios.post('/store/ib/updateInBound',
                formdata
            ).then(rs => {
                if (rs.data.code = 200) {
                    this.successMessage("修改成功")
                }
            })
        }

    },
    created() {
        this.updateInBound = this.$route.query.row
        this.updateDetailList = this.updateInBound.detailList
        this.inBound.inBoundId = this.updateInBound.inBoundId
        this.inBound.bKind = this.updateInBound.bKind
        this.inBound.employeeId = this.updateInBound.employeeId
        this.inBound.providerId = this.updateInBound.providerId
        this.inBound.truckingNumber = this.updateInBound.truckingNumber
        this.inBound.state = this.updateInBound.state
    }

}
</script>

<style scoped>
#change {
    width: 100%;
    height: 100%;
}

.change-top {
    width: calc(100% -20px);
    height: 60px;
    /* background-color: pink; */
    line-height: 60px;
    padding-left: 20px;
    font-size: 13px;
}

.change-content {
    width: 100%;
    height: calc(100% - 60px);
    margin-top: 40px;
    /* background-color: skyblue; */
}

.el-input,
.el-button {
    font-size: 13px;
}

/* 合计行整体样式修改开始 */
.el-table /deep/ .el-table__footer-wrapper tbody td {
    background-color: #fff1d4;
}

.el-table /deep/ .el-table__body tr:hover>td {
    background-color: #fff1d4;
}


td.el-table__cell .el-button {
    width: 40px;
    margin-left: 0px;
}
</style>